<template>
	<!-- 轮播图 -->
	<swiper indicator-dots="indicatorDots" autoplay="autoplay" interval="interval" duration="duration" circular="circular" 	indicator-active-color="rgba(78, 221, 249)" class="swiper_con">
	  <block v-for="(item,index) in imageList" :key="item.productId">
	    <swiper-item>
	      <image :src="item.photoUrl"></image>
	    </swiper-item>
	  </block>
	</swiper>
</template>

<script>
	export default{
		name:"mainswiper",
		//接收从父组件传过来的参数
		props:{
			imageList:{
				type:Array
			}
		},
		//为什么是函数的形式，原因是需要保留各个组件的独立的作用域区间
		data(){
			return{
				indicatorDots: true, //轮播是否有小圆点
				vertical: false, //false 横向   true 纵向
				autoplay: true, //自动播放
				interval: 2000, //动画时间
				duration: 1000, //间隔时间
				circular: true, //衔接动画  
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 轮播图 */
	.swiper_con {
	  width: 750rpx;
	  height: 375rpx;
	}
	.swiper_con .wx-swiper-dot-active{
	  background: #4eddf9;
	  width: 24rpx;
	  border-radius: 36%;
	}
</style>
